<template>
  <div class="flex flex-col h-full">
    <BaseCard title="打包申请管理">
      <OperationBar @refresh-list="() => getTableList()" />
    </BaseCard>
    <div class="flex-1 mt-2 basic-page">
      <el-table
        v-loading="loading"
        class="basic-table"
        height="100%"
        :data="dataSource"
        :row-class-name="tableRowClass"
        row-key="id"
        @row-click="handleRowClick"
      >
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="打包日期"
          min-width="207"
        >
          <template #default="{ row }">
            {{ formatUnix(row.pack_begin_at) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="tcc_version"
          show-overflow-tooltip
          label="打包版本"
          min-width="123"
        >
          <template #default="{ row }">
            <span>
              {{ row.tcc_version }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="node_name"
          show-overflow-tooltip
          label="节点名称"
          min-width="140"
        >
          <template #default="{ row }">
            <span class="text-[#376AF7]">{{ row.node_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="platform"
          show-overflow-tooltip
          label="系统信息"
          min-width="160"
        />
        <el-table-column
          prop="kernel_version"
          show-overflow-tooltip
          label="内核信息"
          min-width="230"
        />
        <el-table-column
          prop="package_status"
          show-overflow-tooltip
          label="是否有可用包"
          min-width="131"
        >
          <template #default="{ row }">
            <span>{{ getUseStatus(row.package_status) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="pack_status"
          show-overflow-tooltip
          label="打包状态"
          min-width="105"
        >
          <template #default="{ row }">
            <span :style="{ color: getStatusStyle(row.pack_status) }">{{
              getPackStatus(row.pack_status) || '-'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="spend_time" label="打包时长" min-width="79">
          <template #default="{ row }">
            {{ formatSeconds(row.spend_time) || '——' }}
          </template>
        </el-table-column>
      </el-table>
      <BasicPagination
        ref="paginationRef"
        :total="total"
        :disabled="loading"
        @change="getTableList"
      >
      </BasicPagination>
    </div>
  </div>
</template>
<script lang="ts" setup>
import OperationBar from './components/OperationBar.vue'
import BaseCard from '@/components/base-card'
import { formatUnix, formatSeconds } from '@/utils'
import type { NodeData } from '@/apis/model/node'
import { omit } from 'lodash-es'
import { state, PACK_STATUS, USE_STATUS, STATUS_STYLE } from './state'
const paginationRef = ref()
const loading = ref<boolean>(false)
const dataSource = ref<NodeData[]>([])
const total = ref(0)
const rowId = ref('')
//某一行row样式
const tableRowClass = row => {
  if (rowId.value === row.id) return 'current-row'
  return ''
}
//某一行点击事件
const handleRowClick = row => {
  rowId.value = row.id
}
//获取状态样式
const getStatusStyle = computed(() => (status: number) => STATUS_STYLE[status])
/**
 * 获取打包状态
 */
const getPackStatus = computed(
  () => (pack_status: number) => PACK_STATUS[pack_status]
)
/**
 * 获取use状态
 */
const getUseStatus = computed(
  () => (use_status: number) => USE_STATUS[use_status]
)

const getTableList = (params: any = {}) => {
  const query = {
    ...omit({ ...state, ...params }, ['page'])
  }
  loading.value = true
  node_pack_list({ ...query })
    .then(res => {
      dataSource.value = res?.list ?? []
      total.value = +res?.total ?? 0
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 200)
    })
}
defineExpose({ getTableList })
</script>
<style lang="scss" scoped>
.pack-page {
  @apply h-full;
  &_card {
    @apply h-full bg-white;
    .table-content {
      height: calc(100% - 130px);
    }
    :deep(.current-row) {
      color: #333;
      background-color: #f9faff;
    }
  }
}
</style>
